<template>
	<div class="role_box">
		<div class="role_title">项目管理</div>

		<!-- 搜索区域 -->
		<div class="role_search">
			<div class="search_box">
				<el-input 
					v-model="nameSearch" 
					class="name_search input" 
					placeholder="请输入项目名称" 
					clearable
					@input="handleSearchInput"
				>
					<template #prefix>
						<el-icon><Search /></el-icon>
					</template>
				</el-input>
			</div>
			<div class="recycle_bin">
				<el-badge :value="recycleBinTotal" class="item">
					<el-button type="danger" @click="openRecycleBin">回收站</el-button>
				</el-badge>
			</div>
			<div class="add_box">
				<el-button color="#0052CC" @click="openAddDialog">新增</el-button>
			</div>
		</div>

		<!-- 表格区域 -->
		<div class="table-container">
			<el-table
				:data="datas"
				style="width: 98%; margin-top: 2%; font-size: 13px"
				border
				row-key="id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
				default-expand-all
			>
				<el-table-column label="序号" width="60" align="center">
					<template #default="data">
						{{ data.row.id }}
					</template>
				</el-table-column>
				<el-table-column label="项目名称" width="140" align="center">
					<template #default="data">
						{{ data.row.title }}
					</template>
				</el-table-column>
				<el-table-column label="公司标识" align="center">
					<template #default="data">
						{{ data.row.companyid }}
					</template>
				</el-table-column>
				<el-table-column label="公司名称" align="center">
					<template #default="scope">
						{{ getCompanyNameById(scope.row.companyid) }}
					</template>
				</el-table-column>
				<el-table-column label="项目地址" align="center">
					<template #default="scope">
						{{ scope.row.address }}
					</template>
				</el-table-column>
				<el-table-column label="开始时间" align="center">
					<template #default="scope">
						{{ scope.row.start_time }}
					</template>
				</el-table-column>
				<el-table-column label="结束时间" align="center">
					<template #default="scope">
						{{ scope.row.end_time }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="200" align="center">
					<template #default="scope">
						<el-button type="primary" @click="openEditDialog(scope.row)">编辑</el-button>
						<el-button type="danger" @click="handleDelete(scope.row.id)">下架</el-button>
					</template>
				</el-table-column>
			</el-table>

			<template style="display: flex; justify-content: center">
				<el-pagination
					background
					layout="prev, pager, next, total"
					:total="total"
					:page-size="pageSize"
					:current-page="currentPage"
					@current-change="handlePageChange"
					style="margin-top: 20px; text-align: right; padding-right: 20px"
				/>
			</template>
		</div>

		<!-- 新增/编辑弹窗 - 宽度调整为800px -->
		<el-dialog v-model="dialogVisible" :title="dialogTitle" :width="dialogWidth" @close="resetForm">
			<el-form ref="projectFormRef" :model="projectForm" :rules="formRules" label-width="120px" class="project-form">
				<!-- 项目所属公司 - 宽度100% -->
				<el-form-item label="项目所属公司" prop="companyId">
					<el-select v-model="projectForm.companyId" placeholder="请选择公司" clearable style="width: 100%">
						<el-option v-for="company in companyList" :key="company.id" :label="company.account" :value="company.id" />
					</el-select>
				</el-form-item>

				<!-- 项目名称 -->
				<el-form-item label="项目名称" prop="title">
					<el-input v-model="projectForm.title" placeholder="请输入项目名称" />
				</el-form-item>

				<!-- 项目地址 -->
				<el-form-item label="项目地址" prop="address">
					<el-input v-model="projectForm.address" placeholder="请输入项目地址" />
				</el-form-item>

				<!-- 项目周期 -->
				<el-form-item label="项目周期" prop="dateRange">
					<el-date-picker
						v-model="projectForm.dateRange"
						type="daterange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						value-format="YYYY-MM-DD"
					/>
				</el-form-item>

				<!-- 操作员账户密码 - 占一行 -->
				<el-row class="form-row">
					<el-col :span="11">
						<el-form-item label="操作员账号" prop="operatorAccount">
							<el-input v-model="projectForm.operatorAccount" placeholder="请输入操作员账号" />
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="操作员密码" prop="operatorPassword">
							<el-input v-model="projectForm.operatorPassword" placeholder="请输入操作员密码" type="password" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 会计账号密码 - 占一行 -->
				<el-row class="form-row">
					<el-col :span="11">
						<el-form-item label="项目会计账号" prop="accountantAccount">
							<el-input v-model="projectForm.accountantAccount" placeholder="请输入会计账号" />
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="项目会计密码" prop="accountantPassword">
							<el-input v-model="projectForm.accountantPassword" placeholder="请输入会计密码" type="password" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 项目经理账户密码 - 占一行 -->
				<el-row class="form-row">
					<el-col :span="11">
						<el-form-item label="项目经理账号" prop="managerAccount">
							<el-input v-model="projectForm.managerAccount" placeholder="请输入项目经理账号" />
						</el-form-item>
					</el-col>
					<el-col :span="11" :offset="2">
						<el-form-item label="项目经理密码" prop="managerPassword">
							<el-input v-model="projectForm.managerPassword" placeholder="请输入项目经理密码" type="password" />
						</el-form-item>
					</el-col>
				</el-row>

				<!-- 社保基数 - 分别占一行 -->
				<el-form-item label="个人社保基数" prop="personalSocialSecurity">
					<el-input-number
						v-model="projectForm.personalSocialSecurity"
						class="mx-4"
						placeholder="请输入个人社保基数"
						:min="0"
						:precision="2"
						controls-position="right"
						@change="handleChange"
						style="width: 100%"
					/>
				</el-form-item>

				<el-form-item label="单位社保基数" prop="companySocialSecurity">
					<el-input-number
						v-model="projectForm.companySocialSecurity"
						class="mx-4"
						placeholder="请输入单位社保基数"
						:min="0"
						:precision="2"
						controls-position="right"
						@change="handleChange"
						style="width: 100%"
					/>
				</el-form-item>
			</el-form>

			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="handleSubmit">确认</el-button>
			</template>
		</el-dialog>

		<!-- 回收站弹窗 -->
		<el-dialog v-model="recycleBinVisible" title="回收站" width="80%" :before-close="handleRecycleBinClose">
			<!-- 回收站搜索区域 -->
			<div class="recycle-bin-search">
				<el-input
					v-model="recycleBinSearch"
					placeholder="请输入项目名称"
					style="width: 300px; margin-right: 20px"
					clearable
					@input="handleRecycleBinSearchInput"
				/>
			</div>

			<!-- 回收站表格 -->
			<el-table :data="recycleBinData" type="small" style="width: 100%; margin-top: 20px" border>
				<el-table-column label="序号" width="60" align="center">
					<template #default="scope">
						{{ scope.row.id }}
					</template>
				</el-table-column>
				<el-table-column prop="title" label="项目名称" width="140" align="center" />
				<el-table-column prop="companyid" label="公司标识" align="center" />
				<el-table-column prop="account" label="公司名称" align="center" />
				<el-table-column prop="address" label="项目地址" align="center" />
				<el-table-column prop="start_time" label="开始时间" align="center" />
				<el-table-column prop="end_time" label="结束时间" align="center" />
				<el-table-column label="操作" width="120" align="center">
					<template #default="scope">
						<el-button size="small" type="primary" @click="handleRestore(scope.row)">恢复</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 回收站分页 -->
			<template style="display: flex; justify-content: center">
				<el-pagination
					background
					layout="prev, pager, next, total"
					:total="recycleBinTotal"
					:page-size="recycleBinPageSize"
					:current-page="recycleBinCurrentPage"
					@current-change="handleRecycleBinPageChange"
					style="margin-top: 20px; text-align: center"
				/>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue';
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus';
import { getProjectList,recoverProject } from '../../api/staff/index.js';
import { getOrgTree } from '../../api/account/index.js';
// 导入接口并统一命名
import { addProject, delProject, getProject } from '../../api/staff/index.js';

// 定义公司对象接口
interface Company {
	id: string | number;
	account: string;
	[key: string]: any; // 允许其他属性
}

// 定义项目对象接口
interface Project {
	id: string;
	companyid: string;
	title: string;
	address: string;
	start_time: string;
	end_time: string;
	operatorAccount: string;
	operatorPassword: string;
	accountantAccount: string;
	accountantPassword: string;
	managerAccount: string;
	managerPassword: string;
	personalSocialSecurity: number;
	companySocialSecurity: number;
	deleted_at?: string;
	account?: string;
	[key: string]: any;
}

// 定义账号接口
interface Account {
	id: number;
	account: string;
}

// 表格数据相关
const datas = ref<Project[]>([]);
const total = ref(0);
const pageSize = ref(10);
const currentPage = ref(1);
const nameSearch = ref('');

// 公司列表数据
const companyList = ref<Company[]>([]);

// 弹窗相关 - 宽度调整为800px
const dialogVisible = ref(false);
const dialogTitle = ref('新增项目');
const dialogWidth = ref('800px');
const projectFormRef = ref();

// 回收站相关
const recycleBinVisible = ref(false);
const recycleBinData = ref<Project[]>([]);
const recycleBinTotal = ref(0);
const recycleBinPageSize = ref(10);
const recycleBinCurrentPage = ref(1);
const recycleBinSearch = ref('');
const recycleBinCount = ref(12); // 默认值，实际应该从接口获取

// 表单数据
const projectForm = reactive({
	id: '',
	companyId: '',
	title: '',
	address: '',
	dateRange: [] as string[],
	operatorAccount: '',
	operatorPassword: '',
	accountantAccount: '',
	accountantPassword: '',
	managerAccount: '',
	managerPassword: '',
	personalSocialSecurity: 0,
	companySocialSecurity: 0,
});
// 定义账号类型常量
const ACCOUNT_TYPES = {
	ACCOUNTANT: 1, // 会计/劳资员
	MANAGER: 2, // 项目经理
	OPERATOR: 3, // 操作员
};
// 表单验证规则
const formRules = reactive({
	companyId: [{ required: true, message: '请选择项目所属公司', trigger: 'change' }],
	title: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
	address: [{ required: true, message: '请输入项目地址', trigger: 'blur' }],
	dateRange: [{ required: true, message: '请选择项目周期', trigger: 'change' }],
	personalSocialSecurity: [
		{ type: 'number', min: 0, message: '个人社保基数不能为负数', trigger: 'blur' }
	],
	companySocialSecurity: [
		{ type: 'number', min: 0, message: '单位社保基数不能为负数', trigger: 'blur' }
	]
});

// 获取公司列表数据
const getCompanyList = async () => {
	const loading = ElLoading.service({
		lock: true,
		text: '加载公司列表中...',
		background: 'rgba(0, 0, 0, 0.7)',
	});

	try {
		const res = await getOrgTree();
		companyList.value = res.companylist || [];
	} catch (error) {
		ElMessage.error('获取公司列表失败');
		console.error('获取公司列表失败:', error);
	} finally {
		loading.close();
	}
};

// 根据公司ID获取公司名称
const getCompanyNameById = (companyId: string | number): string => {
	const company = companyList.value.find((item) => item.id == companyId);
	return company ? company.account : '';
};
// 获取项目列表数据
const fetchProjectList = async () => {
	const loading = ElLoading.service({
		lock: true,
		text: '加载项目列表中...',
		background: 'rgba(0, 0, 0, 0.7)',
	});

	try {
		// 请求所有数据（不分页）
		const res = await getProjectList({
			name: nameSearch.value,
			status: 0,
		});

		// 在前端进行分页处理
		if (res.data) {
			// 计算当前页应该显示的数据
			const startIndex = (currentPage.value - 1) * pageSize.value;
			const endIndex = startIndex + pageSize.value;
			const pageData = res.data.slice(startIndex, endIndex);

			datas.value = pageData || [];

			// 设置总数据量为所有数据的长度
			total.value = res.data.length;
		} else {
			datas.value = [];
			total.value = 0;
		}

		console.log(res);
	} catch (error) {
		ElMessage.error('获取项目列表失败');
		console.error('获取项目列表失败:', error);
	} finally {
		loading.close();
	}
};
// 打开新增弹窗
const openAddDialog = () => {
	dialogTitle.value = '新增项目';
	resetForm();
	dialogVisible.value = true;
};

// 打开编辑弹窗 - 通过接口获取最新数据
const openEditDialog = async (row: Project) => {
  const loading = ElLoading.service({
    lock: true,
    text: '加载项目详情中...',
    background: 'rgba(0, 0, 0, 0.7)',
  });

  try {
    dialogTitle.value = '编辑项目';
    resetForm();

    // 调用接口获取项目详情
    const res = await getProject({ id: row.id });
    const projectData = res.data || {};
    console.log("项目详情:", projectData);

    // 填充表单数据
    projectForm.id = projectData.id;
    projectForm.companyId = projectData.companyid;
    projectForm.title = projectData.title;
    projectForm.address = projectData.address;
    projectForm.dateRange = [projectData.start_time, projectData.end_time];
    projectForm.personalSocialSecurity = projectData.gr_security || 0;
    projectForm.companySocialSecurity = projectData.dw_security || 0;

    // 处理账号信息回显 (0: 操作员, 1: 项目会计, 2: 项目经理)
    if (res.account && Array.isArray(res.account)) {
      const accounts = res.account;
      
      // 操作员账号 (索引0)
      if (accounts.length > 0 && accounts[0]) {
        projectForm.operatorAccount = accounts[0].account || '';
      }
      
      // 项目会计账号 (索引1)
      if (accounts.length > 1 && accounts[1]) {
        projectForm.accountantAccount = accounts[1].account || '';
      }
      
      // 项目经理账号 (索引2)
      if (accounts.length > 2 && accounts[2]) {
        projectForm.managerAccount = accounts[2].account || '';
      }
    }

    dialogVisible.value = true;
  } catch (error) {
    ElMessage.error('获取项目详情失败');
    console.error('获取项目详情失败:', error);
  } finally {
    loading.close();
  }
};

// 重置表单
const resetForm = () => {
	if (projectFormRef.value) {
		projectFormRef.value.resetFields();
	}

	// 重置表单数据
	projectForm.id = '';
	projectForm.companyId = '';
	projectForm.title = '';
	projectForm.address = '';
	projectForm.dateRange = [];
	projectForm.operatorAccount = '';
	projectForm.operatorPassword = '';
	projectForm.accountantAccount = '';
	projectForm.accountantPassword = '';
	projectForm.managerAccount = '';
	projectForm.managerPassword = '';
	projectForm.personalSocialSecurity = 0;
	projectForm.companySocialSecurity = 0;
};

// 数字输入框变化处理
const handleChange = (value: number) => {
	console.log('数值变化:', value);
};

// 提交表单 - 新增/编辑项目
const handleSubmit = async () => {
  if (!projectFormRef.value) return;

  try {
    // 表单验证
    await projectFormRef.value.validate();

    const loading = ElLoading.service({
      lock: true,
      text: projectForm.id ? '更新项目中...' : '创建项目中...',
      background: 'rgba(0, 0, 0, 0.7)',
    });

    // 准备提交的数据
    let requestData: any = {
      companyid: projectForm.companyId,
      title: projectForm.title,
      address: projectForm.address,
      start_time: projectForm.dateRange[0],
      end_time: projectForm.dateRange[1],
      gr_security: projectForm.personalSocialSecurity || 0,
      dw_security: projectForm.companySocialSecurity || 0,
    };

    // 如果是编辑操作
    if (projectForm.id) {
      requestData.projectid = projectForm.id;

      // 准备账号相关数据 (按照索引对应: 0-操作员, 1-会计, 2-项目经理)
      const accounts = [];
      const passwords = [];

      // 操作员账号信息 (索引0)
      accounts.push(projectForm.operatorAccount || '');
      passwords.push(projectForm.operatorPassword || '');

      // 项目会计账号信息 (索引1)
      accounts.push(projectForm.accountantAccount || '');
      passwords.push(projectForm.accountantPassword || '');

      // 项目经理账号信息 (索引2)
      accounts.push(projectForm.managerAccount || '');
      passwords.push(projectForm.managerPassword || '');

      requestData.account = accounts;
      requestData.password = passwords;
      requestData.id = [1, 2, 3]; // 固定的账号ID数组
    } else {
      // 新增操作
      const accounts = [];
      const passwords = [];
      const projectTypes = [];

      // 会计账号信息
      if (projectForm.accountantAccount) {
        accounts.push(projectForm.accountantAccount);
        passwords.push(projectForm.accountantPassword || '');
        projectTypes.push(ACCOUNT_TYPES.ACCOUNTANT);
      }

      // 项目经理账号信息
      if (projectForm.managerAccount) {
        accounts.push(projectForm.managerAccount);
        passwords.push(projectForm.managerPassword || '');
        projectTypes.push(ACCOUNT_TYPES.MANAGER);
      }

      // 操作员账号信息
      if (projectForm.operatorAccount) {
        accounts.push(projectForm.operatorAccount);
        passwords.push(projectForm.operatorPassword || '');
        projectTypes.push(ACCOUNT_TYPES.OPERATOR);
      }

      requestData.account = accounts;
      requestData.password = passwords;
      if (projectTypes.length > 0) {
        requestData.project_type = projectTypes;
      }
    }

    let result;
    result = await addProject(requestData);

    loading.close();

    if (result?.code === 1) {
      ElMessage.success(projectForm.id ? '编辑成功' : '新增成功');
      dialogVisible.value = false;
      fetchProjectList(); // 重新获取列表数据
    } else {
      ElMessage.error(result?.msg || (projectForm.id ? '编辑失败' : '新增失败'));
    }
  } catch (error) {
    console.error('提交失败:', error);
    // 如果是表单验证失败，不需要额外处理，element-plus会自动提示
    if (!(error instanceof Error) || !error.message.includes('Validation failed')) {
      ElMessage.error('提交失败，请稍后重试');
    }
  }
};

// 删除项目
const handleDelete = async (id: string) => {
	try {
		await ElMessageBox.confirm('确定要下架这个项目吗？', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		});

		const loading = ElLoading.service({
			lock: true,
			text: '下架项目中...',
			background: 'rgba(0, 0, 0, 0.7)',
		});

		const result = await delProject({id:id});

		loading.close();

		if (result.code==1) {
			ElMessage.success('下架成功');
			fetchProjectList(); // 重新获取列表数据
			// 增加回收站计数
			recycleBinCount.value++;
		} else {
			ElMessage.error(result?.message || '下架失败');
		}
	} catch (error) {
		// 如果用户取消删除，不做处理
		if (error !== 'cancel') {
			console.error('下架失败:', error);
			ElMessage.error('下架失败，请稍后重试');
		}
	}
};

// 分页变化
const handlePageChange = (page: number) => {
	currentPage.value = page;
	fetchProjectList();
};

// 监听搜索词变化
watch(nameSearch, (newVal) => {
	currentPage.value = 1;
	// 延迟搜索，避免输入过快导致频繁请求
	setTimeout(() => {
		fetchProjectList();
	}, 500);
});
// 搜索防抖计时器
let searchTimer: number | null = null;
let recycleBinSearchTimer: number | null = null;

// 主列表搜索处理
const handleSearchInput = () => {
	// 清除之前的计时器
	if (searchTimer) {
		clearTimeout(searchTimer);
	}

	// 设置新的计时器，300ms后执行搜索
	searchTimer = window.setTimeout(() => {
		currentPage.value = 1;
		fetchProjectList();
	}, 300);
};

// 回收站搜索处理
const handleRecycleBinSearchInput = () => {
	// 清除之前的计时器
	if (recycleBinSearchTimer) {
		clearTimeout(recycleBinSearchTimer);
	}

	// 设置新的计时器，300ms后执行搜索
	recycleBinSearchTimer = window.setTimeout(() => {
		recycleBinCurrentPage.value = 1;
		fetchRecycleBinList();
	}, 300);
};


// 处理回收站关闭
const handleRecycleBinClose = () => {
	recycleBinVisible.value = false;
	recycleBinSearch.value = '';
	recycleBinCurrentPage.value = 1;

	// 清除搜索计时器
	if (recycleBinSearchTimer) {
		clearTimeout(recycleBinSearchTimer);
		recycleBinSearchTimer = null;
	}
};

// 打开回收站弹窗
const openRecycleBin = () => {
	recycleBinVisible.value = true;
	// 重置为第一页并加载数据
	recycleBinCurrentPage.value = 1;
	fetchRecycleBinList();
};
// 监听搜索词变化
watch(nameSearch, (newVal) => {
	currentPage.value = 1;
	// 延迟搜索，避免输入过快导致频繁请求
	setTimeout(() => {
		fetchProjectList();
	}, 500);
});
// ... ex
// 获取回收站列表数据
const fetchRecycleBinList = async () => {
	const loading = ElLoading.service({
		lock: true,
		text: '加载回收站数据中...',
		background: 'rgba(0, 0, 0, 0.7)',
	});

	try {
		// 请求所有数据（不分页）
		const res = await getProjectList({
			status: 1,
			name: recycleBinSearch.value,
		});

		// 在前端进行分页处理
		if (res.data) {
			// 计算当前页应该显示的数据
			const startIndex = (recycleBinCurrentPage.value - 1) * recycleBinPageSize.value;
			const endIndex = startIndex + recycleBinPageSize.value;
			const pageData = res.data.slice(startIndex, endIndex);

			const processedData = pageData.map((item: any) => ({
				id: item.id,
				title: item.title,
				companyid: item.companyid,
				account: item.account || '',
				address: item.address || '',
				start_time: item.start_time || '',
				end_time: item.end_time || '',
				deleted_at: item.deleted_at || '',
				operatorAccount: item.operatorAccount || '',
				operatorPassword: item.operatorPassword || '',
				accountantAccount: item.accountantAccount || '',
				accountantPassword: item.accountantPassword || '',
				managerAccount: item.managerAccount || '',
				managerPassword: item.managerPassword || '',
				personalSocialSecurity: item.personalSocialSecurity || 0,
				companySocialSecurity: item.companySocialSecurity || 0,
			}));

			recycleBinData.value = processedData as Project[];

			// 设置总数据量为所有数据的长度
			recycleBinTotal.value = res.data.length;
		} else {
			recycleBinData.value = [];
			recycleBinTotal.value = 0;
		}
	} catch (error) {
		ElMessage.error('获取回收站数据失败');
		console.error('获取回收站数据失败:', error);

		// 出错时使用空数组
		recycleBinData.value = [];
		recycleBinTotal.value = 0;
	} finally {
		loading.close();
	}
};
// 回收站分页变化
const handleRecycleBinPageChange = (page: number) => {
	recycleBinCurrentPage.value = page;
	fetchRecycleBinList();
};


// 恢复项目
const handleRestore = async (row: Project) => {
	try {
		await ElMessageBox.confirm(`确定要恢复项目"${row.title}"吗？`, '恢复确认', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		});

		// 实际项目中应该调用恢复项目的接口
		await recoverProject({id:row.id});

		ElMessage.success('恢复成功');
		// 重新获取回收站数据
		fetchRecycleBinList();
		// 减少回收站计数
		recycleBinCount.value--;
		// 重新获取项目列表
		fetchProjectList();
	} catch (error) {
		if (error !== 'cancel') {
			console.error('恢复失败:', error);
			ElMessage.error('恢复失败，请稍后重试');
		}
	}
};

// 页面加载时获取数据
onMounted(() => {
	getCompanyList();
	fetchProjectList();
	fetchRecycleBinList();
});
</script>

<style scoped>
.role_box {
	width: 100%;
	background-color: #fff;
	min-height: calc(100vh - 60px);
}
.role_title {
	background: #fff;
	width: 100%;
	height: 60px;
	font-size: 24px;
	font-weight: 500;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	margin-bottom: 15px;
	padding-left: 20px;
}

.role_search {
	display: flex;
	/* justify-content: space-between; */
	padding-left: 2%;
	padding-right: 2%;
	margin-bottom: 10px;
	align-items: center;
}
.recycle_bin {
	margin-left: 60%;
	color: white;
}
.add_box {
	margin-left: 20px;
}
.name_search {
	width: 280px;
}

.table-container {
	padding: 0 1%;
}

/* 表单样式优化 */
.project-form {
	padding: 10px 0;
}

.el-form-item {
	margin-bottom: 16px;
}

/* 行布局样式 */
.form-row {
	margin-bottom: 16px;
}

/* 解决label过长问题 */
:deep(.el-form-item__label) {
	white-space: nowrap;
}

/* 调整输入框样式 */
:deep(.el-input-number) {
	width: 100%;
}

.recycle-bin-search {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}
</style>
